<template>
  <!--
  @click-left:左边的点击事件
  @click-right:右边的点击事件
  left:左边的内容
  title:中间的内容
  right:右边的内容
  right-click:右边内容点击事件
 -->
  <van-nav-bar
    fixed
    placeholder
    @click-left="leftClick"
    @click-right="rightClick"
  >
    <template #left>
      <slot v-if="leftShow" name="leftContent">
        <i class="iconfont icon-arrow-left-bold"></i>{{ left }}
      </slot>
    </template>
    <template #titleContent>
      <slot name="title">{{ title }} </slot>
    </template>
    <template #right>
      <slot v-if="rightShow" name="rightContent">
        {{ rightText }}
      </slot>
    </template>
  </van-nav-bar>
</template>

<script>
export default {
  name: 'HmNavBar',
  props: {
    // 中间内容
    title: {
      type: String,
      default: ''
    },
    // 左边内容
    left: {
      type: String,
      default: ''
    },
    // 显示的文字
    rightText: {
      type: String,
      default: ''
    },
    // 是否用插槽
    rightShow: {
      type: Boolean,
      default: true
    },
    leftShow: {
      type: Boolean,
      default: true
    },
    // 返回路径
    path: {
      type: String,
      default: ''
    }
  },
  methods: {
    // 点击左边箭头
    leftClick () {
      // 如果没传路径就回到上一页
      if (!this.path) {
        this.$router.back()
        return
      }
      // 否则跳转到指定路径
      this.$router.push(this.path)
    },
    // 点击右边 触发父组件的rightClick事件
    rightClick () {
      this.$emit('rightClick')
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep .van-nav-bar__content {
  .icon-arrow-left-bold {
    color: #333;
    font-size: 18px;
    // padding-top: 5px;
  }
  color: #fff;
  background-color: pink;
  height: 64px;
  padding-top: 15px;
  background: linear-gradient(to right, #f774bc 0%, #f3bedf 100%);
  // background: linear-gradient(to right, #ff6251 0%, #ff9d55 100%);
}
.title {
  font-family: MicrosoftYaHei;
  font-size: 22px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 1px;
  color: #ffffff;
}
</style>
